<div class="property {{style}}" id="{{property}}">
  <vde-can-drop-field style="{{canDropStyle}}" ng-if="!noDrop && canDropStyle">
  </vde-can-drop-field>

  <label>
    {{label}}
    <a ng-if="hintUrl" href="{{hintUrl}}" class="icon-question-sign" target="_blank"></a>

    <i ng-if="scale && scale.properties.type == 'ordinal' &&
              ((!field && values.indexOf(ngModel) == -1) ||
              (field && !fieldMatchesDomain))" class="icon-warning-sign"
         vde-tooltip="Warning: The field/value specified was not found in the scale's domain" position="top"></i>
  </label>

  <div class="field" ng-switch on="type">
    <div ng-if="scale || field">
      <vde-binding scale="scale" field="field"></vde-binding>
    </div>

    <div ng-show="!field && type">
      <span ng-switch-when="text">
          <input type="text" ng-model="$parent.ngModel" ng-change="onchange()" ng-class="{'scaled-input': scale != undefined, 'disabled-input': item.properties[property].disabled}" />
      </span>

      <span ng-switch-when="number">
        <input ng-if="scale" type="text" class="number" ng-model="$parent.$parent.ngModel" ng-change="onchange()" min="{{min}}" max="{{max}}" ng-class="{'scaled-input': scale != undefined, 'disabled-input': item.properties[property].disabled}" />

        <input ng-if="!scale" type="number" class="number" ng-model="$parent.$parent.ngModel" ng-change="onchange()" min="{{min}}" max="{{max}}" ng-class="{'scaled-input': scale != undefined, 'disabled-input': item.properties[property].disabled}" />
      </span>

      <span ng-switch-when="range">
        <input type="range" ng-model="$parent.ngModel" ng-change="onchange()" min="{{min}}" max="{{max}}" step="{{step}}" ng-class="{'scaled-input': scale != undefined, 'disabled-input': item.properties[property].disabled}" />

        <span class="editVal" vde-edit-name
              ng-model="$parent.ngModel" ng-change="onchange()" vde-tooltip="Click to edit">{{$parent.ngModel || 0}}</span>
      </span>

      <span ng-switch-when="color">

        <input colorpicker type="text" class="color-property"
               style="background-color: {{ $parent.ngModel }};"
               ng-model="$parent.ngModel"
               ng-change="onchange()"
               ng-class="{'scaled-input': scale != undefined,
               'disabled-input': item.properties[property].disabled}"/>

        <span class="editVal" vde-edit-name
              ng-model="$parent.ngModel" ng-change="onchange()" vde-tooltip="Click to edit">{{$parent.ngModel}}</span>
      </span>

      <span ng-switch-when="checkbox">
        <input type="checkbox" ng-model="$parent.ngModel" ng-change="onchange()" />
        <span class="hint">{{hint}}</span>
      </span>

      <span ng-switch-when="select"><select ng-change="onchange()" ng-model="$parent.ngModel" ng-options="opt for opt in $parent.options" ng-class="{'scaled-input': scale != undefined, 'disabled-input': item.properties[property].disabled}"></select></span>

      <span ng-switch-when="radio"><label class="option" ng-repeat="opt in $parent.options"><input type="radio" ng-model="$parent.$parent.ngModel" value="{{opt}}" /> {{opt}}</label> </span>

      <span ng-switch-when="field" class="hint schema-target">Drop a field here.</span>

      <span ng-switch-when="scale" ng-show="!scale" class="hint schema-target">Drop a scale here.</span>

      <span ng-switch-when="font">
        <input type="number" ng-model="$parent.ngModel.fontSize.value" ng-change="onchange('fontSize')" class="fontSize" />

        <select ng-model="$parent.ngModel.font.value" ng-change="onchange('font')" class="fontFamily">
          <option>Helvetica</option>
          <option>Verdana</option>
          <option>Georgia</option>
          <option>Palatino</option>
          <option>Garamond</option>
          <option>Trebuchet MS</option>
        </select>
      </span>

      <div class="expr-container" ng-switch-when="expr" vde-expr  ng-model="$parent.ngModel" item="item" property="property"></div>

      <div class="expr-container" ng-switch-when="expr-str" vde-expr="str" ng-model="$parent.ngModel" item="item" property="property"></div>
    </div>

    <div class="transclude" ng-transclude="1"></div>
  </div>

  <br ng-if="style != 'full'" clear="all" />
</div>
